<template>
    <div class="person">
        <h1>监视：watchEffect</h1>
        <h1>当前温度为：{{ temp }}</h1>  <!-- 此处不用.value -->
        <button @click="tempAdd">温度增加</button>
    </div>
</template>


<script lang="ts" setup name="Person">
    import {ref,watchEffect} from "vue"
    //数据
    let temp = ref(10)
    //方法
    function tempAdd(){
        temp.value += 10
    }
  
    const stopWatch = watchEffect(()=>{
        if(temp.value>=50)
        {
            console.log("联系服务器")
        }
        if(temp.value>=100)
        {
            stopWatch()
        }
    })
    
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>